<template>
<!-- 购物车:
1、进入购物车页面进行渲染(产品列表，勾选列表，全选按钮)
2、全选/全不选的联动。(点击每一项商品，点击全选按钮)
3、进入编辑状态(编辑状态的切换靠isEditing来完成)
4、删除商品(布局和删除请求，删除到为空时候的处理)|
 -->
    <div>
        <tips />
        <van-checkbox-group v-model="result">
            <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id" @click="hditemGoods(item)" :disabled="isEditing">
                <van-swipe-cell>
                <van-card
                :num="item.number"
                :price="item.retail_price.toFixed(2)"
                :title="item.goods_name"
                desc="左滑移出购物车"
                :thumb="item.list_pic_url"/>
                <van-stepper v-model="item.number" v-show="isEditing" @change="stepNum(item)"/>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="delCart(item)"/>
                    </template>
                </van-swipe-cell>

                </van-checkbox>
            
        </van-checkbox-group>
        <!-- 提交栏 -->
        <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
            <!-- 编辑时禁用按钮     disabled为false或数组为空时,此时只是ui界面显示禁用,实际仍然可以点击,所以在事件里也禁用 -->
        <van-checkbox v-model="checkedAll" :disabled="isEditing || cartList.length==0 ">全选</van-checkbox>
        <template #tip>
             累计共{{cartTotal.goodsCount}}件商品，可点击 
             <van-button :type="isEditing?'danger':'primary'" size="small" @click="isEditing=!isEditing">{{isEditing?'完成编辑':'编辑'}}</van-button>
               按钮进行商品数量修改 
        </template>
</van-submit-bar>
    </div>
</template>

<script>
import Vue from 'vue'
import tips from "@/components/Tips"
import {getCartIndex,chanChecked,chanCratUpdat,delGoods} from "@/request/api"
export default {
    data () {
        return {
            result: [],     //选中的商品数组
            // checkedAll:false,
            cartList:[],    //产品信息
            cartTotal:{},    //总商品数量
            isEditing:false     //是否编辑状态
            
        }
    },
    components:{
       tips
    },
    methods:{
        onSubmit(){},
        // 函数封装
        renderData(data){
            // 每次渲染数据前,清空result数组,否则数组长度一直增加,影响到选中列表和checkedAll
            this.result=[]
            let {cartList,cartTotal} =data
            this.cartList=cartList
            this.cartTotal=cartTotal

            // 遍历cartList数组,如果checked为1,就把该id放入result数组
            cartList.map(item=>{
                item.checked?this.result.push(item.id):""
                // return e.checked=0
            })
        },
        hditemGoods(e){
            if(this.isEditing) return;   //为true表示编辑状态,以下操作全部不执行
            // 点击每一项商品,发起请求告诉后端用户的操作
            chanChecked({
                isChecked:e.checked==1?0:1,
                productIds:e.product_id.toString()
            }).then(res=>{
                // 调用函数
                // console.log(res);
                this.renderData(res.data)
            })
        },
        // 修改商品步进器时更新数据
        stepNum(e){
            chanCratUpdat({
                goodsId:e.goods_id,
                id:e.id,
                number:e.number,
                productId:e.product_id
            }).then(res=>{
                this.renderData(res.data)
            })
        },
        // 删除商品
        delCart(e){
            delGoods({
                productIds:e.product_id.toString()
            }).then(res=>{
                this.renderData(res.data)
            })
        }
    },
    computed:{
    //    total(){
    //        return(
    //            this.cartList.reduce((pre,cur)=>{
    //                if(this.result.includes(cur.id))
    //                return pre+cur.retail_price*cur.number
    //                return pre
    //            },0)*100
    //        )
    //    },
       checkedAll:{
           get(){
            //    全选按钮收result数组影响,如果他们长度一样,就说明小选框都选上了,(长度不为0的情况下)
               return this.result.length==this.cartList.length && this.cartList.length!=0
           },
           set(val){
               if(this.isEditing) return;
                let ids=this.cartList.map(e=>{
                    return e.product_id
                })
                // 发起全选请求
                chanChecked({
                    isChecked:val==false?0:1,   //全选或全不选
                    productIds:ids.toString()
                }).then(res=>{
                    this.renderData(res.data)
                })
           }
       }
    },
    created(){
        getCartIndex().then(res=>{
            // console.log(res.data);
            // 调用函数
            this.renderData(res.data)
        })
    },
    
    // 组件内部的路由守卫,当进入这个组件时才判断,就不用每次跳转路由时都要判断
    beforeRouteEnter(to,from,next){
        let token=localStorage.getItem("token")
    // 点击购物车时判断有没有token,没有则说明没有登录
        if(token){
        next()
        }else{
        // 守卫执行时,组件实例还没有创建,不能写this
        Vue.prototype.$toast("请先登录!")
        setTimeout(() => {
            next("/user")
        }, 1000);
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .van-checkbox-group{
        padding: 10px;
        background-color: #fff;
        /deep/.van-checkbox__label{
            flex: 1;
            margin-bottom: 10px;
        }
        .van-stepper{
            text-align: right;
        }
    }
    .van-submit-bar{
        bottom: 50px;
    }
    .van-submit-bar__tip{
        display: flex;
        align-items: center;
        .van-button{
            margin: 0 10px;
        }
    }
    .van-card__title{
        font-size: 18px;
        padding-top: 15px;
    }
    .van-card__desc{
        padding-top: 5px;
    }
    
    .delete-button{
        height: 100%;
    }
    /* .van-checkbox{
        border-bottom: 1px solid #ccc;
    } */
</style>